<template>
  <!-- 修改用户名 -->
  <div class="updataName">
    <!-- 头部导航 -->
    <van-nav-bar
      title="设置昵称"
      left-text="返回"
      right-text="完成"
      @click-left="$emit('delUserShow')"
      @click-right="emitUser"
      left-arrow
    />
    <!-- /头部导航 -->

    <!-- 修改内容 -->
    <div class="jiaPadding">
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="11"
        placeholder="请输入昵称"
        show-word-limit
      />
    </div>

    <!-- /修改内容 -->
  </div>
</template>

<script>
import { emitUserFile } from "@/api/user.js";
export default {
  data() {
    return {
      message: this.value || "",
    };
  },
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  methods: {
    //   修改用户名称
    async emitUser() {
      if (this.value === this.message) return this.$emit("delUserShow", true);
      if (!this.message.trim()) return this.$toast("昵称不能为空");
      // 加载
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      try {
        await emitUserFile({
          name: this.message,
        });
        this.$toast.success("更新成功");

        this.$emit("delUserShow", true);
      } catch (error) {
        this.$toast("更新失败");
      }
    },
  },
};
</script>

<style lang='less' scoped>
.updataName {
  .jiaPadding {
    padding: 20px;
    .van-field {
      border-radius: 15px;
    }
  }
}
</style>